import { defineComponent, ref } from "vue";
import styles from "./demonstration.module.less";
import { imgPath } from "@/common/utils";

export default defineComponent({
  name: 'dutyDemonstration',
  setup() {
    // 项目介绍
    const ProjectDes = () => (
      <div class={styles['project-des']}>
        <img src={imgPath('/duty/demonstration/banner.png')} />
        <div class={styles['prod-des-text']}>
          <span>2009年，在原国家旅游局和原中国保监会的共同推动下，保险和旅游行业开创了中国乃至世界第一个全行业统保的典范一一旅行社责任保险统保示范项目。十年来，中联金安作为示范项目的保险经纪人，持续为旅行社提供保险经纪、调解处理、紧急救援、安全培训和风险管理服务，基本解决了旅责险“投保易索赔难”、“保险不保险”的痼疾，成为旅游行业主管部门安全管理的得力抓手和其他部委管理行业安全风险的样板。</span>
        </div>
      </div>
    )

    const serverDesState = ref([
      {
        icon: imgPath('/duty/demonstration/mechanism.png'),
        label: '调解处理机制',
        value: '为调解旅行社与旅游者、旅行社与保险公司间的索赔矛盾，引导旅游者合理合法维权，第一时间、第一地点减少矛盾并化解纠纷，示范项目在顶层设计上，充分发挥了市场配置资源的决定性作用，未用一分一厘财政资金，创新建立第三方民间调解处理机制',
      },
      {
        icon: imgPath('/duty/demonstration/mode.png'),
        label: '调解服务模式',
        value: '全国调解处理中心+34省（计划单列市和重点旅游城市）分中心+台湾服务中心365天*24小时全天候服务 。',
      },
      {
        icon: imgPath('/duty/demonstration/worth.png'),
        label: '调解服务价值',
        value: '通过“平时风险培训、出险专人负责、应急垫付预付、纠纷有人调解、组团地接并案处理”等多种手段，协助行业建立第三方纠纷调解体系，大大减少了旅游合同投诉和涉诉案件数量，成为旅行社妥善处理事故的“娘家人”和旅游者与旅行社、旅行社与保险公司之间的“润滑剂”，成为政府撬动市场力量，辅助社会治理的典范 。',
      },
    ])

    // 服务介绍
    const ServerDes = () => (
      <div class={styles['server-des']}>
        <div class={styles.container}>
          <span class={styles.title}>服务介绍</span>
          <div class={styles['server-main']}>
            {
              serverDesState.value.map((item: any) => (
                <div class={styles['server-item']}>
                  <div class={styles['server-icon']}>
                    <img src={item.icon} />
                  </div>
                  <div class={styles['server-info']}>
                    <div class={styles['server-title']}>{item.label}</div>
                    <div class={styles['server-text']}>{item.value}</div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )

    const highlightServerState = ref([
      {
        img: imgPath('/duty/demonstration/highlights-1.png'),
        text: '保险事故处理及时有效为行业安全排忧解难',
      },
      {
        img: imgPath('/duty/demonstration/highlights-2.png'),
        text: '依托互联网新科技手段为公民出境旅游赋能',
      },
      {
        img: imgPath('/duty/demonstration/highlights-3.png'),
        text: '开展服务流程标准建设提高服务质量和效率',
      },
      {
        img: imgPath('/duty/demonstration/highlights-4.png'),
        text: '沉淀并分析出险数据库为行业风险研究献策',
      },
    ])

    // 项目标题
    const ProjectTitle = (props: any) => (
      <div class={styles['project-title']}>
        <img src={imgPath('/decoration.png')} />
        <span>{props.title}</span>
        <img class={styles.reverse} src={imgPath('/decoration.png')} />
      </div>
    )

    // 亮点服务
    const HighlightServer = () => (
      <div class={styles['highlight-server']}>
        <div class={styles['container']}>
          <ProjectTitle title="亮点服务" />
          <div class={styles['highlight-main']}>
            {
              highlightServerState.value.map((item: any) => (
                <div class={styles['highlight-item']}>
                  <img src={item.img} />
                  <span>{item.text}</span>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )

    // 优势服务
    const AdvantageServer = () => (
      <div class={styles['advantage-server']}>
        <div class={styles['container']}>
          <ProjectTitle title="亮点服务" />
          <img class={styles['advantage-server-img']} src={imgPath('/duty/demonstration/advantage.jpg')} />
        </div>
      </div>
    )

    // 服务案例
    const ServerExpample = () => (
      <div class={styles['server-expample']}>
        <div class={styles['container']}>
          <ProjectTitle title="服务案例" />
          <img class={styles['server-expample-img']} src={imgPath('/duty/demonstration/example.jpg')} />
        </div>
      </div>
    )

    return () => (
      <div class={styles.dutyDemonstration}>
        <ProjectDes />
        <ServerDes />
        <HighlightServer />
        <AdvantageServer />
        {/* <ServerExpample /> */}
      </div>
    )
  }
})